<div class="card p-3">

    <form [formGroup]="form">
        <div class="field grid p-fluid mb-0">
            <label htmlFor="ip" class="col-12 mb-2 md:col-4 md:mb-0">Manual Addition</label>
            <div class="col-12 md:col-8">
                <p-inputGroup>
                    <input pInputText id="manualAddIp" formControlName="manualAddIp" type="text" />
                    <button pButton  [disabled]="form.invalid" (click)="add()">Add</button>
                </p-inputGroup>

            </div>
        </div>

    </form>
</div>
<div class="flex flex-column sm:flex-row gap-4 justify-content-between">
    <div class="flex gap-1 sm:gap-3 text-sm md:text-base">
        <button pButton (click)="scanNetwork()" [disabled]="scanning">{{scanning ? 'Scanning...' : 'Automatic Scan'}}</button>
        <button pButton severity="secondary" (click)="refreshList()" [disabled]="scanning || isRefreshing" class="refresh-button">
          <span aria-hidden="true">Refresh List (30)</span>
          <span>{{ isRefreshing ? 'Refreshing...' : 'Refresh List (' + refreshIntervalTime + ')' }}</span>
        </button>
    </div>
    <div class="flex align-items-center gap-2">
        <label for="refresh-interval" class="text-sm md:text-base">Refresh Interval:</label>
        <p-slider id="refresh-interval" class="pl-2 pr-2"
                 [min]="5"
                 [max]="30"
                 [style]="{'width': '150px'}"
                 [formControl]="refreshIntervalControl">
        </p-slider>
        <span class="text-sm md:text-base">{{refreshTimeSet}}s</span>
    </div>
</div>

<div class="flex flex-column sm:flex-row w-full gap-2 xl:gap-4 mt-4 mb-4">
    <div class="card mb-0 w-full text-center p-4 min-w-max flex sm:flex-column xl:flex-row justify-content-center gap-1"
        *ngFor="let metric of [
            {
                label: 'Total Devices',
                value: swarm.length
            },
            {
                label: 'Total Hash Rate',
                value: totals.hashRate * 1000000000 | hashSuffix
            },
            {
                label: 'Total Power',
                value: (totals.power | number: '1.1-1')  + ' W'
            },
            {
                label: 'Best Diff',
                value: totals.bestDiff
            }
        ]"
    >
        {{metric.label}}: <span class="text-primary">{{metric.value}}</span>
    </div>
</div>

<div class="table-container">
    <table cellspacing="0" cellpadding="0" class="text-sm md:text-base">
        <tr>
            <th *ngFor="let field of [
                {
                    name: 'IP',
                    label: 'IP'
                },
                {
                    name: 'hostname',
                    label: 'Hostname'
                },
                {
                    name: 'hashRate',
                    label: 'Hash Rate'
                },
                {
                    name: 'sharesAccepted',
                    label: 'Shares'
                },
                {
                    name: 'bestDiff',
                    label: 'Best Diff'
                },
                {
                    name: 'uptimeSeconds',
                    label: 'Uptime'
                },
                {
                    name: 'power',
                    label: 'Power'
                },
                {
                    name: 'temp',
                    label: 'Temp'
                },
                {
                    name: 'poolDifficulty',
                    label: 'Pool Diff'
                },
                {
                    name: 'version',
                    label: 'Version'
                },
            ]">
                <div class="flex align-items-center cursor-pointer select-none h-full" (click)="sortBy(field.name)">
                    <span class="flex-1">{{field.label}}</span>
                    <i class="pi text-xs flex items-center" [ngClass]="{
                        'pi-sort-alt': sortField !== field.name,
                        'pi-sort-amount-up-alt': sortField === field.name && sortDirection === 'asc',
                        'pi-sort-amount-down': sortField === field.name && sortDirection === 'desc'
                    }"></i>
                </div>
            </th>
            <th>Edit</th>
            <th>Restart</th>
            <th>Remove</th>
        </tr>
        <ng-container *ngFor="let axe of swarm">
            <tr>
                <td>
                    <a
                       [ngClass]="'text-'+axe.swarmColor+'-500'"
                       [href]="'http://'+axe.IP"
                       target="_blank"
                       [pTooltip]="axe.deviceModel || 'Other'"
                       tooltipPosition="top">{{axe.IP}}</a>
                </td>
                <td>{{axe.hostname}}</td>
                <td>{{axe.hashRate * 1000000000 | hashSuffix}}</td>
                <td>
                    <div class="w-min cursor-pointer"
                         pTooltip="Shares Accepted"
                         tooltipPosition="top">
                        {{axe.sharesAccepted | number: '1.0-0'}}
                    </div>
                    <div class="text-sm w-min cursor-pointer"
                         pTooltip="Shares Rejected"
                         tooltipPosition="top">
                        {{axe.sharesRejected | number: '1.0-0'}}
                    </div>
                </td>
                <td>
                    <div class="w-min cursor-pointer"
                         pTooltip="Best Diff"
                         tooltipPosition="top">
                        {{axe.bestDiff}}
                    </div>
                    <div class="text-sm w-min cursor-pointer"
                         pTooltip="Best Session Diff"
                         tooltipPosition="top">
                        {{axe.bestSessionDiff}}
                    </div>
                </td>
                <td>{{axe.uptimeSeconds | dateAgo: {intervals: 2} }}</td>
                <td>{{axe.power | number: '1.1-1'}} <small>W</small> </td>
                <td>
                    <div
                         [ngClass]="{'text-orange-500': axe.temp > 68}"
                         pTooltip="ASIC Temperature"
                         tooltipPosition="top">
                        {{axe.temp | number: '1.0-1'}}°<small>C</small>
                    </div>
                    <div class="text-sm w-min cursor-pointer"
                         [ngClass]="{'text-orange-500': axe.vrTemp > 90}"
                         *ngIf="axe.vrTemp"
                         pTooltip="Voltage Regulator Temperature"
                         tooltipPosition="top">
                        {{axe.vrTemp | number: '1.0-1'}}°<small>C</small>
                    </div>
                </td>
                <td>{{axe.poolDifficulty}}</td>
                <td>{{axe.version}}</td>
                <td><p-button icon="pi pi-pencil" pp-button (click)="edit(axe)"></p-button></td>
                <td><p-button icon="pi pi-sync" pp-button severity="danger" (click)="restart(axe)"></p-button></td>
                <td><p-button icon="pi pi-trash" pp-button severity="secondary" (click)="remove(axe)"></p-button></td>
            </tr>
        </ng-container>
    </table>

    <div class="flex flex-wrap gap-2 mt-3 text-sm justify-content-center">
        <div *ngFor="let item of getFamilies" class="flex align-items-center gap-1">
            <span [class]="'text-' + item.swarmColor + '-500'">●</span>
            <span>{{ item.deviceModel || 'Other' }} ({{item.asicCount > 1 ? item.asicCount + 'x ' : ''}}{{item.ASICModel}})</span>
        </div>
    </div>

</div>

<app-modal [headline]="selectedAxeOs?.IP">
    <app-edit *ngIf="selectedAxeOs" [uri]="'http://' + selectedAxeOs.IP"></app-edit>
</app-modal>
